<!--
 * @Description: 技-师地图
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-06-26 14:00:55
 * @LastEditTime: 2023-08-02 14:43:30
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-map-index" v-loading="!isLoad">
    <!-- 当前开放城市 -->
    <div
      class="search-info flex-between pl-lg pr-lg f-title text-bold c-title b-1px-b"
    >
      <el-form
        @submit.native.prevent
        :inline="true"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="开放城市" prop="city_id">
          <el-select
            @change="getList(1)"
            v-model="searchForm.city_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in base_city"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="space-md"></div>
    <div id="map-container-box"></div>

    <el-dialog :visible.sync="showDialog" width="400px" center>
      <div class="coach-info">
        <img class="work-img" :src="detail.work_img" />
        <div class="f-mini-title c-title text-bold mt-sm">
          {{ detail.coach_name }}
        </div>
        <div class="flex-y-center mt-sm">
          <div class="service-label flex-center f-icontext">
            {{ textType[detail.text_type] }}
          </div>
          <div
            class="time-label flex-y-center ml-md f-icontext c-paragraph"
            v-if="detail.near_time"
          >
            <div class="near-text flex-center">最早可约</div>
            <div
              class="near-time flex-center c-base rel"
              :style="{ color: primaryColor }"
            >
              <div class="bg abs" :style="{ background: primaryColor }"></div>
              {{ detail.near_time }}
            </div>
          </div>
        </div>
        <div class="flex-y-center f-icontext c-caption mt-sm">
          <div class="flex-y-baseline">
            <i class="iconfont iconpingfen1 icon-font-color"></i>
            <div class="star-text flex-y-center f-caption">
              {{ detail.star || 0 }}
            </div>
          </div>
          <div class="line"></div>
          <div>已服务{{ detail.order_num || 0 }}单</div>
          <div class="line"></div>
          <div>从业{{ detail.work_time }}年</div>
        </div>
        <div class="introduce-info mt-md pd-lg f-paragraph c-title radius-15">
          <div v-html="detail.text"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import LabelCluster from '@/utils/tmap'
export default {
  components: {
  },
  data () {
    return {
      isLoad: false,
      primaryColor: '#19c865',
      textType: {
        1: '可服务',
        2: '服务中',
        3: '可预约',
        4: '不可预约'
      },
      timer: null,
      map: null,
      isInitMap: false,
      labelList: [],
      base_city: [],
      searchForm: { city_id: '' },
      coachList: [],
      detail: {},
      showDialog: false
    }
  },
  created () {
    this.initIndex()
  },
  destroyed () {
    this.destroyMap()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async initIndex () {
      let { code, data } = await this.$api.map.citySelect()
      if (code !== 200) return
      this.base_city = data
      if (data.length === 0) return
      this.searchForm.city_id = data[0].id
      await this.getList(1)
      this.isLoad = true
    },
    async getList (flag) {
      this.getTableDataList(flag)
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.getTableDataList()
      }, 60000)
    },
    async getTableDataList (flag = 0) {
      let { searchForm } = this
      let { code, data } = await this.$api.map.getMapCoach(searchForm)
      if (code !== 200) return
      this.coachList = data
      this.initMap(flag)
    },
    initMap (flag) {
      let { coachList, labelList, isInitMap } = this
      if (isInitMap && labelList.length > 0) {
        labelList.map(item => {
          item.destroy()
        })
        this.labelList = []
      }

      let ind = this.base_city.findIndex(item => {
        return item.id === this.searchForm.city_id
      })
      let { lat, lng } = this.base_city[ind]

      if (flag && isInitMap) {
        this.map.setCenter([lat, lng])
      }

      if (!isInitMap) {
        let center = new TMap.LatLng(lat, lng)
        this.map = new TMap.Map('map-container-box', {
          zoom: 12,
          center: center,
          doubleClickZoom: false
        })
        this.isInitMap = true
      }

      let _that = this
      coachList.map(item => {
        let label = new LabelCluster({
          map: this.map,
          position: new TMap.LatLng(item.lat, item.lng), // 设置信息框位置
          content: item.work_img,
          id: item.coach_id
        })
        //pc端使用click事件
        label.on('click', function (e) {
          let { id = 0 } = e.target.dataset
          console.log('click', id)
          _that.getDetail(id)
        })
        //移动端使用touchend事件
        label.on('touchend', function (e) {
          let { id = 0 } = e.target.dataset
          console.log('touchend', id)
          _that.getDetail(id)
        })
        this.labelList.push(label)
      })
    },
    async getDetail (id) {
      let { code, data } = await this.$api.map.coachInfo({ id })
      if (code !== 200) return
      data.text = data.text.replace(/\n/g, '<br>')
      this.detail = data
      this.showDialog = true
    },
    destroyMap () {
      if (!this.isInitMap) return
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-map-index {
  background: #fff;
  padding: 0;
  margin: 0;
  height: 100vh;
  .search-info {
    height: 50px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  #map-container-box {
    width: 100%;
    height: calc(100% - 61px);
  }
  .el-dialog__body {
    padding: 0;
  }
  .coach-info {
    max-height: 65vh;
    .work-img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }
    .service-label {
      min-width: 44px;
      height: 16px;
      padding: 0 5px;
      color: #ebddb1;
      background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
      border-radius: 2px;
    }

    .time-label {
      .near-text {
        width: 50px;
        height: 16px;
        background: #f5f5f5;
        border-radius: 2px 0 0 2px;
      }

      .near-time {
        width: 33px;
        height: 16px;
        border-radius: 0 2px 2px 0;

        .bg {
          opacity: 0.1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          border-radius: 0 2px 2px 0;
        }
      }
    }

    .icondianpu {
      margin-right: 3px;
    }

    .iconpingfen1 {
      font-size: 12px;
      background-image: -webkit-linear-gradient(
        270deg,
        #fad961 0%,
        #f76b1c 100%
      );
    }

    .star-text {
      height: 13px;
      color: #ff9519;
      margin-left: 3px;
    }

    .line {
      width: 1px;
      height: 5px;
      background: #979797;
      margin: 0 9px;
    }

    .introduce-info {
      width: 100%;
      max-height: calc(65vh - 390px);
      overflow-y: auto;
      background: #f9f9f9;
    }
  }
}
</style>
